import React from 'react'
import { View } from 'react-native'
import flexStyle from '../../../../configs/flex';
import BusDetail from './BusDetail'
import BusDetailModel from '../../models/BusDetailModel';
import PropTypes from 'prop-types'
import { px2dp } from 'rn-xiaobu-utils';

export default class Details extends React.Component {
  static propTypes = {
    steps: PropTypes.array.isRequired
  }
  render() {
    let detail = []
    this.props.steps.forEach((ele, index)=>{
      if (ele.STEP_TYPE === 2) {
        detail.push(<View key={index + 'busdetail'} style={{ marginBottom: index !== this.props.steps.length - 1 ? px2dp(20) : 0 }}><BusDetail businfo={new BusDetailModel(ele.STEP_START_NAME, ele.STEP_END_NAME, ele.startTime, ele.endTime, ele.BUS_NAMES, ele.STATIONS)}></BusDetail></View>)
      }
    })
    return (
      <View style={[flexStyle.flexV, { marginTop: px2dp(20), backgroundColor: '#FFFFFF' }]}>
        {detail}
      </View>
    )
  }
}
